<template>
  <div class="selectItem-manage">
    <!-- 业务搜索框 -->
    <search-block @handleSearch="handleSearch"></search-block>
    <!-- 搜索框和按钮组件 -->
    <operate-button
      :buttonDisplayRange="buttonDisplayRange"
      :multipleSelection="multipleSelection"
      :refSelectType="refSelectType"
      @handleRefSelect="handleRefSelect"
      @handleSearch="handleSearch"
    ></operate-button>
    <div class="pagination-table-container">
    <pagination-table
      :currentPage="currentPage"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :tableData="tableData"
      :tableLabel="tableLabel"
      :total="total"
      @changePager="changePager"
      @changeSelection="changeSelection"
      ref="paginationTable"
    ></pagination-table>
    </div>
  </div>
</template>

<script>
import SearchBlock from './components/searchBlock'
import OperateButton from './components/operateButton'
import PaginationTable from '@/components/PaginationTable/index'

export default {
  name: 'SelectItemManage',
  components: {
    SearchBlock,
    OperateButton,
    PaginationTable
  },
  props: {
    refButtonDisplayRange: String,
    refSelectType: String
  },
  data() {
    return {
      buttonDisplayRange: 'manage',
      multipleSelection: [],
      pageSizes: [5, 10, 100],
      // pageSize: 0,
      total: 0,
      tableLabel: [
        { keyword: 'id', keyword_zh: 'id' },
        { keyword: 'title', keyword_zh: '名称' },
        { keyword: 'pid', keyword_zh: '父级' },
        { keyword: 'itemValue', keyword_zh: '选择项值' },
         { keyword: 'sort', keyword_zh: '排序' }
      ],
      tableData: [],
      currentPage: 1
    }
  },
  mounted() {
    if (this.refButtonDisplayRange) {
      this.buttonDisplayRange = this.refButtonDisplayRange
    }
    this.getTableData()
  },
  computed: {
    pageSize() {
      return this.pageSizes[0]
    },
    selectItem() {
      return {
        pager: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
        }
      }
    }
  },
  methods: {
     handleRefSelect(multipleSelection){
      this.multipleSelection = multipleSelection
      this.$emit('selectItemManageSelectData', this.multipleSelection)
    },
    changeSelection(val) {
      this.multipleSelection = val
    },
    changePager(pager) {
      this.selectItem.pager = pager
      this.getTableData()
    },
    getTableData() {
      this.$store
        .dispatch('baseSelectItem/queryMoreDetail', this.selectItem)
        .then(res => {
          this.total = res.total
          //格式化部分数据类型
          res.list.forEach(item => {
            if (item.pid) {
              item.pid = JSON.parse(item.pid).title
            }
          })
          this.tableData = res.list
        })
    },
    handleSearch(searchParams) {
      if (!!searchParams) {
        this.selectItem.id = searchParams.id
        this.selectItem.title = searchParams.title
        this.selectItem.pid = searchParams.pid
      }
      this.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>
.saearch-block-container {
  padding: 20px;
}
.pagination-table-container {
  padding: 0 20px 20px 20px;
}
.operate-button-container {
  padding: 0 20px 20px 20px;
}
</style>

